<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">
    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Redux</title>
</head>
<body>
<div id="react-container"></div>
  <script type="text/babel">

      const color = (state = {}, action) => {
        switch (action.type) {
            case "ADD_COLOR":
                return {
                    id: action.id,
                    title: action.title,
                    color: action.color,
                    timestamp: action.timestamp,
                    rating: 0
                }
            case "RATE_COLOR":
                return (state.id !== action.id) ?
                    state :
                    {
                        ...state,
                        rating: action.rating
                    }
            default :
                return state
        }
      }

      let action =  {
         type: "ADD_COLOR",
         id: 33,
         color: "#0000FF",
         title: "Big Blue",
         timestamp: "Thu Mar 10 2016 01:11:12 GMT-0800 (PST)",
         rating: 0
      }

      let newColor = color({}, action)

      console.log( newColor )

      action = {
         type: "RATE_COLOR",
         id: 33,
         rating: 4
      }

      newColor = color(newColor, action)

      console.log( newColor )

  </script>
</body>
</html>
